<!DOCTYPE html>
<html>
<head lang="en">
	
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>ELAN</title>
    <!--ICON-->
    <link href="images/favicon.ico" rel="icon">
     <!--Thư viện hiệu ứng animate-->
    <link href="css/animate.css" rel="stylesheet" type="text/css">
     <!--Reset css về mặc định trên các trình duyệt-->
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <!--Thư viện owl plugin-->
    <link href="css/owl.theme.css" rel="stylesheet" type="text/css">
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
    <!--Thư viện icon font-awesome-->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--Thư viện superslide-->
    <link href="plugins/superslide/dist/stylesheets/superslides.css" rel="stylesheet" type="text/css">
    <!--Css dùng chung -->
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <!--Style cho trang  -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--Style reponsive  -->
    <link rel="stylesheet" type="text/css" href="css/reponsive.css">
    
   
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script src="plugins/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-Cyix5_YzgntrHjaR7yIaYcatuGMGZbE"></script>
<script>
	  // maker là icon mặc định 
	  function initialize() {
		var myLatlng = new google.maps.LatLng(20.856214, 106.678401);//toạ độ bản đồ 
		var mapOptions = {
		  zoom: 17,//độ zoom của bản đồ
		  center: myLatlng// vị trí trung tâm bản đồ
		}
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	  
		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			title: 'Hello World!'
		});
	  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
</script>    
</head>
<body>
    <header class="loc-header">
        <section class="itq-header itq-wrapper">
            <figure class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
                <figcaption class="slogan">
                    <img class="slogan" src="images/slogan.png" alt="">
                </figcaption>
            </figure><!-- .Logo -->

            <nav class="loc-submenu">
                <ul class="menu">
                    <li class="menu-border"><a href="">English</a></li>
                    <li><a href="">Đại lý</a></li>
                    <li><a href="">Tư vấn</a></li>
                    <li class="menu-border"><a href="">Hỏi đáp</a></li>
                    <li class="hotline"><span >Hotline</span> <span class="number">0989 876 890</span></li>
                </ul>
            </nav><!--loc-submenu-->

            <nav class="navigation">
                <ul class="main-menu">
                    <li class="main-menu"><a href="">Trang chủ</a></li>
                    <li class="main-menu"><a href="">giới thiệu</a></li>
                    <li class="main-menu"><a href="">sản phẩm</a>
                        <ul class="sub-menu">
                            <li class="sub-menu"><a href="">sản phẩm 1</a></li>
                            <li class="sub-menu"><a href="">sản phẩm 2</a></li>
                            <li class="sub-menu"><a href="">sản phẩm 3</a></li>
                            <li class="sub-menu"><a href="">sản phẩm 4</a></li>
                        </ul>
                    </li>
                    <li class="main-menu"><a href="">Tin tức</a>
                        <ul class="sub-menu">
                            <li class="sub-menu"><a href="">tin tức 1</a></li>
                            <li class="sub-menu"><a href="">tin tức 2</a></li>
                            <li class="sub-menu"><a href="">tin tức 3</a></li>
                            <li class="sub-menu"><a href="">tin tức 4</a></li>
                        </ul>
                    </li>
                    <li class="main-menu"><a href="">tuyển dụng</a></li>
                    <li class="main-menu"><a href="">liên hệ</a></li>
                </ul>
            </nav><!--.navigation-->
            <section class="button-search"></section>
            <section class="smart-menu">
            	<ul>
                	<li><i class="fa fa-bars"></i></li>
                    <li><i class="fa fa-search"></i></li>
                </ul> 
            </section>
            <section class="search">            
                <form action="" class="search-form">
                    <input type="text" placeholder="Nhập sản phẩm cần tìm">
                    <input type="submit" value="search">
                </form> 
            </section><!--.search-->
        </section>
    </header>
    <section class="clear"></section>
	
    <section id="slides" style="height:300px; overflow:hidden;">
        <section class="slides-container">
            <img src="uploads/slide-con.jpg" alt="Cinelli" width="100%" height="100%">
            <img src="uploads/slider-1.jpg"  >
            <img src="http://demhan.com/Portals/170/7670127changagoi3.jpg" >
            <img src="http://bupbong.vn/profiles/bupbongvn/uploads/attach/p1399976793_jj078.jpg" >
        </section>  
    </section><!-- .slides -->
	
    <section class="clear"></section>
    
    <section class="elan-container">
    	<section class="elan-wrapper">
            <section class="elan-breadcrumb">
                <ul>
                    <li>
                        <a href="#">Trang chủ</a> 
                    </li>
                    <li>
                        <a href="#">Tin tức </a>
                    </li>
                    <li>
                        Xã hội
                    </li>
                </ul>
            </section><!-- .elan-breadcrumb-->
    	
        	<aside class="elan-sidebar">
                <section class="elan-product">
                    <header><h3>danh mục sản phẩm</h3></header>
                    <ul>
                        <li><a href="#">chăn ga gối</a></li>
                        <li><a href="#">sản phẩm cưới</a></li>
                        <li><a href="#">ruột</a></li>
                        <li><a href="#">đệm</a></li>
                        <li><a href="#">sản phẩm theo giá</a></li>
                        <li><a href="#">sản phẩm khách sạn</a></li>
                    </ul>
                </section><!--end .elan-product-->
                <section class="elan-product">
                    <header><h3>sản phẩm mới</h3></header>
                    <ul class="items">
                        <li>
                            <figure>
                                <a href="#"><img src="uploads/product-1.jpg" alt=""/></a>
                               
                            </figure>
                            <p><a href="#">vs 120 </a></p>
                   		</li>
                         <li>
                            <figure>
                                <a href="#"><img src="uploads/product-1.jpg" alt=""/></a>
                               
                            </figure>
                            <p><a href="#">vs 120</a></p>
                   		</li>
                         <li>
                            <figure>
                                <a href="#"><img src="uploads/product-1.jpg" alt=""/></a>
                               
                            </figure>
                            <p><a href="#">vs 120 N GA GỐI ĐÊM MỚI CHÀO MÙA CƯỚI 2014 ƯA CHUỘNG NHẤ </a></p>
                   		</li>
                    
                    </ul>
                </section><!--end .elan-product-->
            </aside><!-- .elan-sidebar-->
            <section class="elan-content">
            	<section class="elan-modul">
					<header>
						<h1>Liên hệ</h1>
						<span></span>
					</header>
					<section id="map-canvas">
						
					</section><!-- map-canvas-->
				</section><!-- .elan-modul-->
                <section class="elan-modul">
					<header>
						<h1>cÔNG TY tnhh CHĂN GA GỐI ĐỆM elan</h1>
						<span></span>
					</header>
					<section class="list-people">
                    	<section class="text">
							<p>Địa chỉ: 80 Quang Trung - Hồng Bàng - Hải Phòng - Việt Nam     </p>
                         </section>   
					</section><!-- .list-people-->
				</section><!-- .elan-modul-->
                <section class="elan-modul">
					<header>
						<h1>Liên hệ với chúng tôi</h1>
						<span></span>
					</header>
					<section class="contact-form">
						<form method="post" action="#">
                        	<table border="0" width="100%">
                            	<tr>
                                	<td>
                                    	<label>Họ và tên</label>
                                    </td>
                                    <td>
                                    	<input type="text" name="txtName">
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	<label>Số điện thoại</label>
                                    </td>
                                    <td>
                                    	<input type="text" name="txtName">
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	<label>Địa chỉ</label>
                                    </td>
                                    <td>
                                    	<input type="text" name="txtName">
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	<label>Email</label>
                                    </td>
                                    <td>
                                    	<input type="text" name="txtName">
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	<label>Nội dung liên hệ</label>
                                    </td>
                                    <td>
                                    	<input type="text" name="txtName">
                                    </td>
                                </tr>
                                 <tr>
                                	<td>
                                    	
                                    </td>
                                    <td>
                                    	<input type="submit" value="">
                                    </td>
                                </tr>
                            </table>
                        
                        </form>
					</section><!-- .list-new-->
				</section><!-- .elan-modul-->
            </section><!-- .elan-content-->
        
        </section><!-- .elan-wrapper-->

    </section><!-- .elan-container-->
    <section class="clear"></section>
       
    <section class="hud_news hud bounceInUp itq-wrapper" data-delay="400">
        <ul class="hud_news">
            <li class="hud_news">
				<figure>
					<a href="" class="xoaydoc">
						<img src="uploads/caichan.jpg" alt="" />
					</a>
				</figure>
                <section>
                    <h4 class="title">thông tin thương hiệu</h4>
                    <p class="decs">Là một trong những nhãn hiệu giường ngủ nổi tiếng nhất thế giới, giường đệm cao su và lò xo Dunlopillo...
                    </p>
                    <a class="next" href="">Xem tiếp <img class="next "src="images/xemtiep.png"/>
                    </a>
                </section>

            </li>
            <li class="hud_news">
				<figure>
					<a href="" class="xoaydoc">
						<img src="uploads/caichan.jpg" alt="" />
					</a>
				</figure>
                <section>
                    <h4 class="title">thông tin thương hiệu</h4>
                    <p class="decs">Là một trong những nhãn hiệu giường ngủ nổi tiếng nhất thế giới, giường đệm cao su và lò xo Dunlopillo...
                    </p>
                    <a class="next" href="">Xem tiếp <img class="next "src="images/xemtiep.png"/>
                    </a>
                </section>

            </li>
            <li class="hud_news">
				<figure>
					<a href="" class="xoaydoc">
						<img src="uploads/caichan.jpg" alt="" />
					</a>
				</figure>
                <section>
                    <h4 class="title">thông tin thương hiệu</h4>
                    <p class="decs">Là một trong những nhãn hiệu giường ngủ nổi tiếng nhất thế giới, giường đệm cao su và lò xo Dunlopillo...
                    </p>
                    <a class="next" href="">Xem tiếp <img class="next "src="images/xemtiep.png"/>
                    </a>
                </section>
            </li>
        </ul>
        <section class="clear"></section>
    </section><!--End .hud_news-->
   
    <footer class="itq-footer bounceInUp itq-wrapper" data-delay="500">
        <section class="itq-social">
            <section class="itq-news">
                <div id="owl-demo">
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                    <div class="item"><p><span class="notification">[ THÔNG BÁO ]</span><a href="#"> GIẢM GIÁ 20% KHI ĐĂNG KÝ ĐẠI LÝ CỦA CHÚNG TÔI</a><span class="date"> 07/07/2014</span></p></div>
                </div>
            </section><!--end .itq-news-->
            <section class="itq-social-item">
                <ul>
                    <li><a href="#"><img class="icon-f" src="images/fb-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/tw-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/you-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/broa-ft.png" alt=""></a></li>
                    <li><a href="#"><img class="icon-f"  src="images/b-ft.png" alt=""></a></li>
                </ul>
            </section><!--end .itq-social-item-->
            <section class="clear"></section>
        </section><!--end .itq-social-->
        <section class="itq-last-footer">
            <section class="itq-logo-ft">
                <figure><img src="images/logo-ft.jpg" alt=""></figure>
            </section><!--end .itq-logo-ft-->
            <section class="itq-address">
                <p class="address"><span class="name">CÔNG TY TNHH CHĂN GA GỐI ĐỆM ELAN</span><span class="add">80 Quang Trung  - Hồng Bàng - Hải Phòng - Việt Nam</span></p>
                <p class="phone">Tel:<a href="#"><img src="images/skype.png" alt=""></a><span>0919 174 898</span></p>
            </section><!--end .itq-logo-ft-->
            <section class="itq-company">
                <p class="company">Copyright © 2014 By Elan.com.vn... All Rights Reserved.</p>
                <p class="dev">Designer and Developer by <a href="#">ITQ.VN</a></p>
            </section><!--end .itq-logo-ft-->
            <section class="clear"></section>
        </section><!--end .itq-last-footer-->
    </footer><!--end .itq-wrapper-->




	<!--Thu vien owl-->
    <script src="plugins/owl.carousel.js" type="text/javascript"></script>
    <!--search-->
    <script src="js/search.js" type="text/javascript"></script>    
    <!--Thu vien supper slide-->
    <script src="plugins/supperslide/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="plugins/supperslide/jquery.animate-enhanced.min.js" type="text/javascript"></script>
    <script src="plugins/supperslide/hammer.min.js" type="text/javascript"></script>
    <script src="plugins/supperslide/jquery.superslides.min.js" type="text/javascript"></script>
    <!--appear-->
    <script src="plugins/jquery.appear.js" type="text/javascript"></script>
     <!--nicescroll-->
    <script src="plugins/jquery.nicescroll.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(e) {
		  //scroll 
		  $("body").niceScroll({zindex:"99999"});
		  //superlide 
          $('#slides').superslides({
				play:7000,
	
				inherit_width_from:'#slides',
				inherit_height_from:'#slides'});
		   //owl-slide		
		   $("#owl-demo").owlCarousel({
                autoPlay: 5000, //Set AutoPlay to 3 seconds
                items : 1,
                itemsDesktop : [1020,1],
				itemsDesktopSmall :[768,1],
                itemsMobile :     [480,1]
                
            });	
			//icon
			$('.icon-f').hover(function(e) {
                $(this).addClass('animated tada');
            },function(e) {
			 $(this).removeClass('animated tada');
			});
		    //menu
			$('.fa-bars').click(function(e) {
                $('.navigation').toggle('fast');
            });	
			
      });
    </script>
     <script type="text/javascript">
        jQuery(function() {
            jQuery('.hud_products').appear();
            jQuery('.hud_trademark').appear();
            jQuery('.hud').appear();
            jQuery('.itq-footer').appear();
            jQuery(document.body).on('appear', '.itq-footer', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
            jQuery(document.body).on('appear', '.hud', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
            jQuery(document.body).on('appear', '.hud_products', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
            jQuery(document.body).on('appear', '.hud_trademark', function(e, $affected) {
                var fadeDelayAttr;
                var fadeDelay;
                jQuery(this).each(function(){
                    if (jQuery(this).data("delay")) {
                        fadeDelayAttr = jQuery(this).data("delay")
                        fadeDelay = fadeDelayAttr;
                    } else {
                        fadeDelay = 0;
                    }
                    jQuery(this).delay(fadeDelay).queue(function(){
                        jQuery(this).addClass('animated').clearQueue();
                    });
                })
            });
        });
    </script>


</html>